<template>
    <div class="smrz">
        <!-- 顶部 -->
        <div class="top">
            <div class="callback" @click="$router.back()">
                <img src="@/assets/callback.png" alt="">
            </div>
            <div class="top-title">
                Ocr Inspection
            </div>
        </div>
        <!-- main -->
        <div class="main">
            <!-- 主体顶部 -->
            <div class="main-top">
                <div class="main-top-title">
                    *Please Upload A Clear Photo Of Your ID Card HereWhich Willlncrease The Success Rate of <span>Your Loan
                        Application From 20% To30%</span>
                </div>
            </div>
            <!-- 主体内容 -->
            <div class="smrz-main">
                <!-- 描述 -->
                <div class="smrz-main-desc">
                    <div class="smrz-main-desc-top">Aadhaar Front</div>
                    <div class="smrz-main-desc-bottom">Click Here To Upload The AadhaarFront</div>
                </div>
                <!-- 上传图片 -->
                <div class="smrz-main-upload">
                    <van-uploader :after-read="sfzqian">
                        <img :src='sfzqianImg' alt="">
                    </van-uploader>
                </div>
                <div class="xian"></div>
            </div>
            <div class="smrz-main">
                <!-- 描述 -->
                <div class="smrz-main-desc">
                    <div class="smrz-main-desc-top">Aadhaar Back</div>
                    <div class="smrz-main-desc-bottom">Click Here To Upload The AadhaarBack</div>
                </div>
                <!-- 上传图片 -->
                <div class="smrz-main-upload">
                    <van-uploader :after-read="sfzhou">
                        <img :src='sfzhouImg' alt="">
                    </van-uploader>
                </div>
                <div class="xian"></div>
            </div>
            <div class="smrz-main">
                <!-- 描述 -->
                <div class="smrz-main-desc">
                    <div class="smrz-main-desc-top">Pan Card Front</div>
                    <div class="smrz-main-desc-bottom">Click Here To Upload The Pan CardFront</div>
                </div>
                <!-- 上传图片 -->
                <div class="smrz-main-upload">
                    <van-uploader :after-read="cardupload">
                        <img :src='carduploadImg' alt="">
                    </van-uploader>
                </div>
                <div class="xian"></div>
            </div>
        </div>
        <!-- 提交按钮 -->
        <van-button class="smrz-btn" :class="{ 'smrz-btn-active': isActiveList.length >= 3 }"
            @click="smrzContinue">Continue</van-button>
    </div>
</template>
<script>
import { scFile, zhengjianshibie } from '@/api';
import { decryptHex, encryptHex } from '../utils/aes.js'
export default {
    name: 'smrz',
    data() {
        return {
            sfzqianImg: require('../assets/sfzqian.png'),
            sfzhouImg: require('../assets/sfzhou.png'),
            carduploadImg: require('../assets/card-upload.png'),
            isActiveList: [], //三张图片都上传完毕下一步
            userdata: {
                sfzqian: {},
                sfzhou: {},
                cardupload: {}
            }
        }
    },
    methods: {
        async sfzqian(file) {
            this.sfzqianImg = file.content
            this.fileonload(file, 'FRONT')
            this.isActiveList.push(1)
        },
        async sfzhou(file) {
            this.sfzhouImg = file.content
            this.fileonload(file, 'BACK')
            this.isActiveList.push(1)
        },
        async cardupload(file) {
            this.carduploadImg = file.content
            this.fileonload(file, 'PAN')
            this.isActiveList.push(1)
        },
        //完成上传
        smrzContinue() {
            this.$router.push('/smrzform')
            console.log(this.isActive)
            console.log(this.userdata)
            console.log(this.isActive)
        },
        //文件上传函数
        async fileonload(file, cardType) {
            // console.log(file.content)
            const res = await scFile(file)
            const res2 = JSON.parse(decryptHex(res.data))
            // console.log(res2)
            // 识别数据
            const from = {
                model: {
                    url: res2.model.id,
                    cardType: cardType
                }
            }
            // console.log(from)
            const b = await zhengjianshibie(encryptHex(JSON.stringify(from)))
            const result = JSON.parse(decryptHex(b.data))
            if (cardType === 'FRONT') {
                this.$store.dispatch('smrz/getUserSfzqian', result.model)
                this.userdata.sfzqian = result.model
                this.userdata.sfzqian.url = res2.model.id
            } else if (cardType === 'BACK') {
                this.$store.dispatch('smrz/getUserSfzhou', result.model)
                this.userdata.sfzhou = result.model
                this.userdata.sfzhou.url = res2.model.id
            } else {
                this.$store.dispatch('smrz/getUserCardupload', result.model)
                this.userdata.cardupload = result.model
                this.userdata.cardupload.url = res2.model.id
            }
            console.log('result', result)
        }
    },
    computed: {
        //判断三个文件是否上传完毕 
    }
}
</script>
<style scoped lang="less">
@a: 3.75vw;

.smrz {

    // button
    .smrz-btn {
        position: fixed;
        width: (232/@a);
        height: (44/@a);
        left: (75/@a);
        bottom: (10/@a);
        background-color: #cccccc;
        border-radius: (10/@a);
        font-family: 'Inter';
        font-style: normal;
        font-weight: 700;
        font-size: (18/@a);
        color: #FFFFFF;
    }

    .smrz-btn-active {
        background: linear-gradient(90deg, #8042FF 0%, #BC37FF 100%) !important;
    }

    // 主体
    .main {
        margin-bottom: (200/@a);
        box-sizing: border-box;
        margin-top: (56/@a);
        width: (330/@a);
        height: (513/@a);
        margin-left: (23/@a);


        .smrz-main {
            height: (142/@a);
            margin-left: (13/@a);
            margin-bottom: (30/@a);

            .smrz-main-desc {


                .smrz-main-desc-top {
                    font-family: 'Inter';
                    font-style: normal;
                    font-weight: 500;
                    font-size: (16/@a);
                    color: #101010;
                    margin-top: (11/@a);

                    margin-bottom: (6/@a);
                }

                .smrz-main-desc-bottom {
                    font-family: 'Inter';
                    font-style: normal;
                    font-weight: 400;
                    font-size: (12/@a);
                    color: #808080;
                }
            }

            .smrz-main-upload {
                width: (167/@a);
                height: (64/@a);
                margin-top: (11/@a);
                border-radius: (10/@a);

                img {
                    width: 100%;
                }
            }

            .xian {
                width: (306/@a);
                height: (2/@a);
                background-color: rgb(225, 225, 225);
                margin-top: (50/@a);
            }
        }

        .main-top {
            height: (55/@a);
            background: #9F3DFF;
            border-radius: (30/@a) (30/@a) 0px 0px;
            position: relative;

            .main-top-title {
                position: absolute;
                top: (7/@a);
                left: (32/@a);
                width: (264/@a);
                height: (43/@a);
                font-family: 'Inter';
                font-style: normal;
                font-weight: 400;
                font-size: (12/@a);
                color: #FFFFFF;
                text-align: center;

                span {
                    color: rgb(0, 255, 240);
                }
            }
        }
    }

    .top {
        height: (56/@a);
        background-color: #fff;
        width: 100vw;
        display: flex;
        justify-content: space-between;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;

        .callback {
            margin-top: (20/@a);
            margin-left: (15/@a);
            width: (10/@a);

            img {
                width: 100%;
            }
        }

        .top-title {
            margin-top: (17/@a);
            margin-right: (120/@a);
            font-family: 'Inter';
            font-style: normal;
            font-weight: 400;
            font-size: (18/@a);
            color: #202020;
        }
    }

}
</style>